<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript02함수와객체</title>
	</head>
	<body>
		<h1>함수와 객체</h1>
		<h3>함수 function</h3>
		<p>프로그램 코드의 집합</p>
		<p>함수 정의 1 : function 함수명(인수){함수몸체;}</p>
		<p>함수 정의 2 : function 함수명(인수){함수몸체; return 결과;}</p>
		<p>함수 호출 : 함수명(인수);</p>
		<script type="text/javascript">
			for (var i = 1; i <= 5; ++i)
				document.write("수지 최고!! <br />");

			function sayHello(count, msg) {
				for (var i = 1; i <= count; ++i)
					document.write(msg + "<br />");
			}

			sayHello(5, "수지!");
			sayHello(10, "수지!!");
			sayHello(15, "수지!!!");
		</script>
		<script type="text/javascript">
			function gugudan(num) {
				var result = '';
				for (var i = 1; i <= 9; ++i) {
					result = num + " x " + i + " = " + i * num + "<br />";
					document.write(result);
				}
			}

			//var n = prompt("출력할 단을 입력하세요");
			//gugudan(n);

			function gugudan2(num) {
				var result = '';
				for (var i = 1; i <= 9; ++i) {
					result += num + " x " + i + " = " + i * num + "<br />";
				}
				return result;
			}

			var dan = prompt("출력할 단을 입력하세요");
			document.write(gugudan2(dan));
		</script>
		
		<h3>함수 내 변수의 scope</h3>
		<p>var 예약어를 사용해서 선언한 변수는 지역변수</p>
		<p>var 예약어를 없이 선언한 변수는 전역변수</p>
		
		<script type="text/javascript">
			var x = '가';	// 지역변수 x
			function showX() {
				x = '나';	// 전역변수 x
				return x;
			}

			document.write(showX());	// x = 나
			document.write(x + "<br />");	// x = 나
			function showY() {
				var x;	// 지역변수 x
				x = '다';
				return x;
			}

			document.write(showY());	// x = 다

			document.write(x + "<br />");	// x = 나
		</script>
		
		<h3>익명함수 anonymous function</h3>
		<p>function 예약어 뒤에 함수명이 없는 함수</p>
		<p>람다lamda 함수라고 함</p>
		<script type="text/javascript">
			//say();	// 익명함수인 경우 사용불가
			say2();
			// 일반함수인 경우 함수 정의보다 호출이 먼저 사용되어도 정상실행
			var say = function() {
				alert("익명함수");
			};
			say();
			// 함수 정의후 호출 - 정상실행
			function say2() {
				alert("일반함수");
			}

			say2();
			// #2
		</script>
		
		<script type="text/javascript">
			var key = 2;
			/*			switch(key){
			 case 1: function say1(){alert("hello");};
			 say1(); break;
			 case 2: function say2(){alert("olleh");};
			 say2(); break;
			 }
			 */
			var says;
			switch(key) {
				case 1:
					says = function() {
						alert("hello");
					};
					break;
				case 2:
					says = function() {
						alert("olleh");
					};
					break;
			}
			says();
			// 단일화된 함수로 호출
		</script>
		
		<h3>콜백함수 callback function</h3>
		<p>일반적으로 함수의 매개변수는 숫자나 문자 중 하나임</p>
		<p>하지만, 경우에 따라 매개 변수가 함수가 될 수도 있는데, 이러한 함수를 콜백함수라 함</p>
		<p>콜백이란 디자인 패턴 중 관찰자(observer)패턴에서 나옴</p>
		<p>즉, 객체의 상태변화(이벤트)가 발생하는 경우 함수에게 이러한 사실을 전달하게 되는데, 이를 콜백이라 함</p>
		<p>예를 들어, 달걀을 잘 삶으려면 15분의 시간이 소요됨<br />
			따라서 15분이 지났는지 계속 시계를 들여다 보거나<br />
			타이머를 이용해 15분이 지나면 알람을 울리게 하면 됨<br />
			콜백처리는 타이머를 이용한 달걀삶기와 유사함
		</p>
		<p>콜백처리는 키보드나 마우스 이벤트, Ajax에서 데이터 처리에 주로 사용됨</p>
		<script type="text/javascript">
			function call3Times(callback) {
				for (var i = 0; i < 3; ++i) {
					callback();
				}
			}

			var mycallback = function() {
				alert("함수 호출");
			};
			call3Times(mycallback);
		</script>
		
		<h3>클로저closure:내부inner함수</h3>
		<p>외부함수의 변수에 접근할 수 있는 내부함수를 의미</p>
		<p>실행 중 내부 함수에 선언된 변수는 언제나 그 상태(값)가 유지됨</p>
		<script type="text/javascript">
			var name = '아이유';	//4. 전역변수 선언
			function say() {
				var name = '수지';
				// alert(name); //일반적으로 사용하는 형식
				function sayName() {
					aleert(name);
				}//1.내부함수 정의

				sayName();
				//2.내부함수 호출
			}

			say();
			//sayName(); //3.내부함수는 외부 호출불가
		</script>
		<script type="text/javascript">
			function nums() {
				var i = 0;
				return ++i;
			};
			document.write(nums());
			document.write(nums());
			document.write(nums());
			function nums2() {
				var i = 0;
				return function() {
					return ++i;
				};
			};
			var num = nums2();
			document.write(num());
			document.write(num());
			document.write(num());
		</script>
		<script type="text/javascript">
			function first(x){
				var tmp = 25;
				function second(y){alert(x+y+(++tmp));}
				second(12);
			}
			function third(x){
				var tmp = 25;
				return function(y){
					alert(x+y+(++tmp));};
				second(12);				
			}
			var fourth = third(13);	//클로저 함수
			fourth(12);	//51
			fourth(12);	//52
			fourth(12);	//53
			
		</script>
	</body>
</html>
